<template>
     <div>
       <!-- 左侧数据 -->
         <catemenu :tabs="tabs" @transfer-index="getcontenebyindex"></catemenu>
       <!-- 右侧商品内容 -->
        <tabscontent :righttabs="righttabs"></tabscontent>
     </div>
</template>
<script>
import catemenu from "../components/catemenu.vue";
import tabscontent from "../components/tabscontent.vue";
import axios from 'axios'
export default {
  data() {
    return {
      tabs: [],
      index: 0,
      righttabs: {}
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getJsonData();
  },
  methods: {
    //请求数据
     async getJsonData() {
      const{data:res}= await this.$axios.get("/data.json")
      this.tabs = res;
       const jsonData = require('../../public/data.json');
        console.log(jsonData);
      // this.tabs=this.tabs.map(item=>{
      //     return item.typelist=item.typelist.map(v=>{return v.imgurl=require(v.imgurl)})
      // })
      let mmm=this.tabs.map(item=>item.typelist.map(v=> v.imgurl=require("../assets/"+v.imgurl)))
      this.righttabs = this.tabs[0];
      console.log(mmm);
      console.log(this.righttabs);
    },
    //接受tabsmune组件传过来的索引index
    getcontenebyindex(index) {
      this.index = index;
      this.righttabs = this.tabs[index];
      // console.log(this.index)
    }
  },
  components: {
    catemenu,
    tabscontent
  }
};
</script>
<style>
/* @import url(); 引入css类 */
* {
  margin: 0;
  padding: 0;
}
#app {
  height: 46rem;
  display: flex;
  background-color: #fafafa;
}
.left_menu {
  width: 170px;
  height: 90%;
}
ul {
  text-align: center;
  list-style: none;
  background: #fafafa;
  flex: 2;
}
ul li {
  height: 80rpx;
  display: flex;
  width: 180rpx;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
.tabscontent {
  height: 90%;
}
.tabscontent_title {
  display: flex;
  flex-wrap: wrap;
  flex: 2;
}
.tabscontent_inter {
  width: 100%;
  height: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.tabscontent_img {
  margin-left: 10px;
  width: 20%;
  height: 80px;
  justify-content: center;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.tabscontent_img img {
  width: 70%;
  height: 60px;
  text-align: center;
}
.active {
  color: #eb4450;
  border-left: 5rpx solid currentColor;
}
.icon {
  flex-wrap: wrap;
}
</style>